<template>
  <div>
    <page-header />
    <div class="profile-content">
      <el-row>
        <el-col :span="23">
          <div class="border-card-container">
            <el-tabs v-model="activeName">
              <!-- 个人信息选项卡 -->
              <el-tab-pane label="个人信息" name="1">
                <user-detail />
              </el-tab-pane>
              <el-tab-pane label="购物车" name="2">
                <Cart />
              </el-tab-pane>
              <el-tab-pane label="订单管理" name="3">
                <Order />
              </el-tab-pane>
              <el-tab-pane label="收获地址" name="4">
                <Address />
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>
    </div>
    <right-bottom-fixd />
  </div>
</template>
<script>
import RightBottomFixd from '@/components/RightBottomFixd'
import PageHeader from '@/components/PageHeader'
import Address from '@/components/Address'
import Cart from '@/components/Cart'
import Order from '@/components/Order'
import UserDetail from '@/components/UserDetail'
import { getUserAllInfo } from '@/common/common'

export default {
  components: {
    PageHeader,
    Address,
    Cart,
    Order,
    UserDetail,
    RightBottomFixd
  },
  data() {
    return {
      activeName: '1'
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    }
  },
  created() {
    this.checkRoutePath()
    // this.getInfo()
    this.checkLogin()
  },
  methods: {
    checkLogin() {
      if (!this.isLogin) {
        this.$router.push('/welcome')
      }
    },
    checkRoutePath() {
      const tabId = this.$route.params.tabId
      if (tabId) {
        this.activeName = '' + tabId
      }
    },
    // 获取用户信息
    getInfo() {
      getUserAllInfo()
    }

  }
}
</script>
<style lang="scss" scoped>
.profile-content {
  // background-color: red;
  margin-top: 40px;
  margin-left: 80px;
  margin-right: 80px;

  .border-card-container {
    margin-top: 20px;
    margin-left: 40px;
    .el-tabs {
      background-color: #f4f2ee;
      .el-tabs__header {
        background-color: #f4f2ee;
      }
    }
  }
}
</style>
